<template>
  <el-dialog
    v-model="model"
    width="400"
    :show-close="false"
    destroy-on-close
    top="30vh"
    @close="model = false"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h3
          :id="titleId"
          :class="titleClass"
          style="display: flex; align-items: center; gap: 4px"
        >
          <el-icon color="#f5922f"><WarningFilled /></el-icon> 确认删除？
        </h3>
        <p style="color: #7c8599; margin-top: 8px">
          删除内容将进入回收站，30天后自动彻底删除。
        </p>
      </div>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="model = false">取消</el-button>
        <el-button type="primary" @click="deleteNoteConfirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch, computed, watchEffect, onMounted, onUnmounted } from 'vue'
const model = defineModel()
const emit = defineEmits(['confirm'])
const deleteNoteConfirm = () => {
  model.value = false
  emit('confirm')
}
</script>
<style scoped lang="scss"></style>
